<template>
  <div>
    <header>
      <span>地址管理</span>
      <van-icon name="arrow-left" @click="backClick" class="left" />
    </header>
    <section >
      <div v-for="(item, index) in shou" :key="index">
        <p>&emsp;收件人:&emsp;{{ item.name }}</p>
        <p>联系电话：{{ item.mobile }}</p>
        <p>收件地址：{{ item.full_region }}</p>
        <p>详细地址：{{ item.address }}</p>
        <button @click="oneDle(item.id)">删除地址</button>
        <span @click="tail(item.id)">查看详情</span>
      </div>
    </section>
    <footer>
      <button @click="addRess">+&nbsp;新建收货地址</button>
    </footer>
    <van-action-sheet v-model="show" title="新建收货地址">
      <div class="content">
        <table>
          <tr>
            <td>收件人&emsp;&emsp;</td>
            <td>
              <input type="text" v-model="username" />
            </td>
          </tr>
          <tr>
            <td>手机号码</td>
            <td>
              <input type="text" v-model="phoneNumber" />
            </td>
          </tr>
          <tr>
            <td>详细地址</td>
            <td>
              <input type="text" v-model="address" />
            </td>
          </tr>
          <tr>
            <td>选择地址</td>
            <td
              style="
                display: flex;
                justify-content: space-around;
                height: 44px;
                align-items: center;
              "
            >
              <span @click="sheng">{{ text1 }}</span>
              <span @click="shi" v-if="text1!='选择省'">{{ text2 }}</span>
              <span @click="qu" v-if="text2!='选择市'">{{ text3 }}</span>
            </td>
          </tr>
          <!-- <tr>
            <td>默认地址</td>
            <td>布尔值</td>
          </tr> -->
        </table>
        <!-- 省 -->
        <div class="span" v-if="value == 1">
          <span
            v-for="(item, index) in arr"
            :key="index"
            @click="spanClick(item.id, item.name)"
          >
            {{ item.name }}
          </span>
        </div>
        <!-- 市 -->
        <div class="span" v-if="value == 2">
          <span
            v-for="(item, index) in arr"
            :key="index"
            @click="span2Click(item.id, item.name)"
          >
            {{ item.name }}
          </span>
        </div>
        <!-- 区 -->
        <div class="span" v-if="value == 3">
          <span
            v-for="(item, index) in arr"
            :key="index"
            @click="span3Click(item.id, item.name)"
          >
            {{ item.name }}
          </span>
        </div>
        <button @click="queren">保存</button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState, mapMutations } from "vuex";
import { getRegion, postSave, getRess, postDelete,getDetail } from "../https/http";
export default {
  name: "Ress",
  data() {
    return {
      active: 0,
      show: false,
      arr: [],
      text1: "选择省",
      text2: "选择市",
      text3: "选择区",
      brr: [],
      value: 1,
      province_id: 0,
      city_id: 0,
      district_id: 0,
      username: ``,
      phoneNumber: ``,
      address: ``,
      is_default: false,
      shou: [],
    };
  },
  methods: {
    // 产看详情
    tail(value){
      getDetail({id:value}).then(res=>{
        console.log("查看地址详情接收数据",res);
      })
    },
    // 删除地址
    oneDle(value) {
      console.log(value);
      postDelete({ id: value })
        .then((res) => {
          console.log(res);
        })
        .then((res) => {
          getRess(localStorage.getItem("token")).then((res) => {
            console.log("重新获取收货地址", res);
            this.shou = res.data;
          });
        });
    },
    // 增加地址
    queren() {
      if(this.username==``||this.phoneNumber==``||this.address==``){
        Toast.fail('内容不完全！');
        return
      }
      postSave({
        name: this.username,
        mobile: this.phoneNumber,
        province_id: this.province_id,
        address:this.address,
        city_id: this.city_id,
        district_id: this.district_id,
        is_default: this.is_default,
      })
        .then((res) => {
          console.log(res);
          this.show = !this.show;
        })
        .then((res) => {
          getRess(localStorage.getItem("token")).then((res) => {
            console.log(123, res);
            this.shou = res.data
          });
        });
    },
    // 选择区
    qu() {
      this.arr = this.brr;
      this.value = 3;
      this.brr = [];
    },
    // 选择市
    shi() {
      this.arr = this.brr;
      this.value = 2;
      this.brr = [];
    },
    // 选择省
    sheng() {
      this.value = 1;
      getRegion(1).then((res) => {
        console.log(res);
        this.arr = res.data;
      });
    },
    // 点击省完成
    spanClick(id, name) {
      this.province_id = id;
      this.text1 = name;
      this.arr = [];
      console.log(id, name);
      this.$nextTick(function () {
        getRegion(id).then((res) => {
          this.brr = res.data;
        });
      });
    },
    span2Click(id, name) {
      this.city_id = id;
      this.text2 = name;
      this.arr = [];
      console.log(id, name);
      this.$nextTick(function () {
        getRegion(id).then((res) => {
          this.brr = res.data;
        });
      });
    },
    span3Click(id, name) {
      this.district_id = id;
      console.log(id, name);
      this.text3 = name;
      this.arr = [];
    },
    // 创建收货地址，显示相关页面
    addRess() {
      console.log("新建收货地址");
      this.show = !this.show;
      console.log(this.shou);
    },
    // 返回我的
    backClick() {
      console.log(123);
      this.$router.push({ name: "User" });
      this.Uchange();
      this.chanGe();
    },
    // vuex
    ...mapMutations(["Uchange", "chanGe"]),
  },
  computed: {
    // vuex
    ...mapState(["UserFalge"]),
  },
  created() {
    // 加载前获取数据加载页面
    getRess(localStorage.getItem("token")).then((res) => {
      console.log("初始收货地址", res);
      this.shou = res.data;
    });
  },
};
</script>

<style scoped lang="less">
.content {
  button {
    display: block;
    height: 30px;
    width: 120px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    border-radius: 30px;
  }
  padding: 16px 16px 0px;
  // background: brown;
  table {
    margin: auto;
  }
  tr {
    height: 44px;
    // background: rgb(223, 223, 238);
    // border: 1px solid black;
  }
  input {
    border: initial;
    border: 1px solid black;
    // border-radius: 20px;
    border-color: rgb(201, 192, 192);
    border-width: 0px 0px 1px 0px;
    box-sizing: border-box;
    padding-left: 30px;
    height: 30px;
  }
}
div {
  font-size: 16px;

  color: rgb(0, 0, 0);
  header {
    height: 35px;
    width: 100%;
    background: #f0f0f1;
    position: fixed;
    top: 0px;
    z-index: 10;
    span {
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
    }
    .left {
      height: 35px;
      line-height: 35px;
      font-size: 25px;
      margin-left: 5px;
    }
  }
  section {
    position: relative;
   
    margin-top: 45px;
    width: 100%;
    height: 100px;
    // background: lightblue;
    div {
      margin: 10px 0px;
      position: relative;
      background: rgb(229, 230, 228);
      p {
        height: 25px;
        // background: lightcoral;
        line-height: 25px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 20px;
      }
      button {
        position: absolute;
        top: 30%;
        right: 20px;
        transform: translateY(-50%);
        // background: rgb(179, 182, 175);
      }
      span {
        position: absolute;
        // background: rgb(179, 182, 175);
        top: 70%;
        right: 20px;
        transform: translateY(-50%);
      }
    }
  }
  footer {
    position: fixed;
    bottom: 20px;
    height: 35px;
    width: 100%;
    text-align: center;
    button {
      height: 35px;
      width: 140px;
      border-radius: 35px;
    }
  }
}
.span {
  width: 277.4px;
  height: 80px;
  margin: auto;
  font-size: 15px;
  // background: chocolate;
  overflow: auto;
  span {
    float: left;
    margin: 5px;
  }
}
</style>